<template>
  <div class="qa-section">
    <el-card class="box-card">
      <h3>问答区</h3>

      <!-- 提问表单 -->
      <el-form :model="newQuestion" label-width="80px" @submit.prevent="addQuestion">
        <el-form-item label="问题标题">
          <el-input v-model="newQuestion.title" placeholder="请输入问题标题"></el-input>
        </el-form-item>
        <el-form-item label="问题描述">
          <el-input type="textarea" v-model="newQuestion.content" placeholder="请输入问题详情..."></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" native-type="submit">提交问题</el-button>
        </el-form-item>
      </el-form>

      <el-divider></el-divider>

      <!-- 问题列表 -->
      <el-table :data="questions" style="width: 100%">
        <el-table-column prop="title" label="问题标题" width="auto"></el-table-column>
        <el-table-column prop="content" label="问题描述"></el-table-column>
        <el-table-column label="操作" width="150">
          <template #default="scope">
            <el-button size="small" @click="showAnswers(scope.row)">查看答案</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 回答展示弹窗 -->
    <el-dialog v-model:propName="dialogVisible" title="答案">
      <span v-for="(answer, index) in currentQuestion.answers" :key="index">{{ answer }}<br /></span>
      <span  class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addAnswer()">添 加 答 案</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newQuestion: { title: '', content: '' },
      questions: [],
      dialogVisible: false,
      currentQuestion: null,
    };
  },
  methods: { 
    addQuestion() {
      // 在这里添加逻辑以向服务器提交新的问题，并刷新问题列表
      console.log('新问题：', this.newQuestion);
      this.questions.push({ ...this.newQuestion, answers: [] });
      this.newQuestion = { title: '', content: '' };
    },
    showAnswers(question) {
      this.currentQuestion = question;
      this.dialogVisible = true;
    },
    addAnswer() {
      const answer = prompt('请输入您的答案:');
      if (answer &&this.currentQuestion) {
        this.currentQuestion.answers.push(answer);
        this.dialogVisible = false; // 添加完答案后关闭对话框
      }
    }
  }
};
</script>

<style scoped>
.qa-section .el-card {
  margin-bottom: 20px;
}
</style>
